<template>
  <div>
    <div class="container">
      <div class="demo-input-suffix searchBox">
        <div class="searchGroup">
          <span class="inputName">管理员名称：</span>
          <el-input placeholder="请输入管理员名称"
                    v-model="query.admin_name"
                    style="width:auto;margin-right:10px;"></el-input>
          <span class="inputName">操作时间：</span>
          <el-date-picker v-model="query.time"
                          type="daterange"
                          align="right"
                          unlink-panels
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          format="yyyy 年 MM 月 dd 日"
                          value-format="yyyy-MM-dd"></el-date-picker>
          <el-button type="success"
                     icon="el-icon-search"
                     size="medium"
                     @click="search"
                     style="margin-left:10px;">搜索</el-button>
          <el-button type="warning"
                     icon="el-icon-refresh-left"
                     size="medium"
                     @click="reset">重置</el-button>
        </div>
      </div>
      <el-table ref="multipleTable"
                :data="tableData"
                border
                style="width: 100%;"
                stripe>
        <el-table-column label="序号"
                         align="center"
                         width="100"
                         fixed>
          <template scope="scope">
            <span>{{scope.$index+(query.page - 1) * pagesize + 1}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="admin_name"
                         label="管理员"
                         align="center"
                         ></el-table-column>
        <el-table-column prop="create_time"
                         label="操作时间"
                         align="center"
                         ></el-table-column>
        <el-table-column prop="ip"
                         label="IP地址"
                         align="center"
                         ></el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination @current-change="handleCurrentChange"
                       :current-page="currentPage"
                       :page-size="pagesize"
                       layout="total, prev, pager, next, jumper"
                       :total="total"></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import api from '@/api/index';
console.log(api);
export default {
  data () {
    return {
      tableData: [], //假人员信息数据
      currentPage: 1, //初始页
      pagesize: 10, //    每页的数据
      total: null,
      query: {
        page: 1,
        admin_name: '',
        time: '',
      }
    };
  },
  mounted () {
    this.ajax(this.query);
  },
  methods: {
    //日志列表接口
    ajax (query) {
      var query = query;
      const loading = this.$loading({ text: '加载中...' });
      this.$http.post(api.JOURNAL, query).then(res => {
        console.log(res);
        loading.close();
        this.tableData = res.data.data;
        this.total = res.data.total;
      });
    },
    //点击第几页
    handleCurrentChange (currentPage) {
      this.query.page = currentPage;
      this.ajax(this.query)
    },
    //重置输入框
    reset () {
      this.query = {
        page: 1,
        admin_name: '',
        time: '',
      }
      this.ajax(this.query)
    },
    search () {
      this.query.page = 1;
      this.ajax(this.query)
    }
  }
};
</script>
<style scoped>
.list {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin: 20px;
}
.searchBox {
    background: #fff;
    /* border-bottom: 1px solid #e4e4e4; */
    width: 100%;
}
.searchGroup {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 20px;
}
.inputName {
    padding: 8px;
}
</style>

<style>
.demo-drawer__content {
    margin: 0 auto;
    width: 80%;
    border: 1px solid #fafafa;
}
.el-drawer__body {
    height: 100%;
    overflow-y: auto;
}
</style>